<template>
  <div class="container" v-if="isShow">
    <div class="alert">
      <div class="message">{{message}}</div>
      <div class="btnCommon success" v-if="type==='alert'" @click="close">确定</div>
      <div class="btnSpace" v-if="type==='confirm'">
        <div class="btnCommon cancel" @click="confirmCancel">取消</div>
        <div class="btnCommon success" @click="confirmSuccess">确认</div>
      </div>
    </div>
    <div class="mask" @click="maskClick"></div>
  </div>
</template>
<script>
export default {
  props: {
    message: {
      type: String,
      default: ''
    },
    type: {
      validator: function (val) {
        // 自定义验证器返回bool值
        return ['alert', 'confirm'].indexOf(val) !== -1;
      }
    },
    success: {
      type: Function,
      default: () => {
        console.log('The success button was clicked');
      }
    },
    cancel: {
      type: Function,
      default: () => {
        console.log('The cancel button was clicked');
      }
    }
  },
  data () {
    return {
      isShow: false
    };
  },
  methods: {
    close () {
      this.isShow = false;
    },
    maskClick () {
      // 只有alert组件才点击mask关闭提示框
      if (this.type === 'alert') {
        this.close();
      }
    },
    confirmCancel () {
      this.close();
      this.cancel();
    },
    confirmSuccess () {
      this.close();
      this.success();
    }
  }
};
</script>
<style scoped lang="scss">
$btn-main: #009688;
$btn-cancel: #ededed;
$btn-dark: darken($btn-main, 10%);
$btn-cancel-dark: darken($btn-cancel, 10%);

.message {
  flex: 1;
  display: flex;
  align-items: center;
  font-size: 16px;
}
.alert {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  width: 300px;
  height: 150px;
  padding: 20px 10px;
  border-radius: 6px;
  background-color: #fff;
  box-shadow: 0 5px 8px rgba(0, 0, 0, 0.05);
  box-sizing: border-box;
  z-index: 3000;
}
.btnCommon {
  width: 105px;
  height: 32px;
  text-align: center;
  line-height: 32px;
  border-radius: 6px;
  cursor: pointer;

  &.success {
    background-color: $btn-main;
    color: #fff;
    &:hover {
      background-color: $btn-dark;
    }
  }

  &.cancel{
    background-color: $btn-cancel;
    color: #000;
    &:hover {
      background-color: $btn-cancel-dark;
    }
  }
}
.btnSpace {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
  width: 300px;
  padding: 0 20px;
  box-sizing: border-box;
}
.mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 2000;
}
</style>
